<!--
 * @Author: wjk
 * @Date: 2020-07-08 15:47:39
 * @LastEditors: wjk
 * @LastEditTime: 2020-07-13 16:28:36
 * @description: 直播帮助中心
-->
<template>
  <view class="live-help-container">
    <view v-for="(item, index) in helpData" :key="index" class="live-help-item">
      <view class="l-h-top" @click="showVideo(item)">
        <view class="l-h-title">{{ item.title }}</view>
        <view class="l-h-sub">{{ item.sub }}</view>
      </view>
      <view class="l-h-bottom">
        《{{ item.sub }}》
      </view>
    </view>
    <!-- <image v-if="videoUrl" class="close" src="/static/images/icon/icon_close_circle.png" @click="videoUrl = ''"></image> -->
    <view class="video-box" :class="{'active': videoUrl}">
      <video
        v-if="videoUrl"
        x5-video-player-type="h5"
        :src="videoUrl"
        autoplay
        :show-fullscreen-btn="false"
        object-fit="contain"
        controls>
        <cover-image class="close" src="/static/images/icon/icon_close_circle.png" @click="videoUrl = ''"></cover-image>
      </video>
    </view>
  </view>
</template>
<script>

export default {
  data() {
    return {
      baseUrl: process.env.VUE_APP_IMAGE_ASSET + '/live_help_video/',
      videoUrl: '',
      helpData: [
        {
          title: '直播间功能介绍-直播开始后',
          sub: '管理直播商品',
          video: 'help_video_01.mp4'
        },
        {
          title: '直播间功能介绍 - 直播开始前',
          sub: '直播未开始能做什么呢？',
          video: 'help_video_02.mp4'
        },
        {
          title: '助理端如何使用',
          sub: '助理功能简介',
          video: 'help_video_03.mp4'
        },
        {
          title: '直播正式开始前能做什么',
          sub: '直播功能简介',
          video: 'help_video_04.mp4'
        },
        {
          title: '如何添加直播商品',
          sub: '直播选品添品说明',
          video: 'help_video_05.mp4'
        },
        {
          title: '如何创建直播预告',
          sub: '快速创建直播间',
          video: 'help_video_06.mp4'
        },
        {
          title: '审核后主页介绍',
          sub: '一分钟了解碧选直播',
          video: 'help_video_07.mp4'
        },
        {
          title: '如何成为主播',
          sub: '碧选直播下载与注册',
          video: 'help_video_08.mp4'
        }
      ]
    }
  },
  onLoad(options) {
  },
  methods: {
    showVideo(item) {
      console.log('item', item)
      this.videoUrl = this.baseUrl + item.video
      console.log('this.videoUrl', this.videoUrl)
    }
  }
}
</script>
<style scoped lang="scss">
.live-help-container{
  position: relative;
  padding: 30rpx;
  .close{
    position: absolute;
    right: 30rpx;
    top: 30rpx;
    width: 60rpx;
    height: 60rpx;
    z-index: 99;
  }
  .live-help-item{
    margin-bottom: 20rpx;
    &:nth-child(3n+1){
      .l-h-top{
        background-image: url('~@/static/images/appdown/video_bg_0.png');
      }
    }
    &:nth-child(3n+2){
      .l-h-top{
        background-image: url('~@/static/images/appdown/video_bg_1.png');
      }
    }
    &:nth-child(3n+3){
      .l-h-top{
        background-image: url('~@/static/images/appdown/video_bg_2.png');
      }
    }
    .l-h-top{
      color: white;
      padding: 50rpx 30rpx;
      box-sizing: border-box;
      width: 690rpx;
      height: 220rpx;
      background-size: 100% 100%;
    }
    .l-h-title{
      font-size: 44rpx;

    }
    .l-h-sub{
      font-size: 28rpx;
      margin-top: 10rpx;
    }
    .l-h-bottom{
      width: 690rpx;
      background-color: #fff;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      box-sizing: border-box;;
      padding: 0 20rpx;
    }
  }
  .video-box{
    left: 0;
    top: 0;
    position: fixed;
    transition: 0.5s;
    width: 0;
    height: 0;
    opacity: 0;
    &.active{
      width: 100%;
      height: 100%;
      opacity: 1;
    }
    video{
      width: 100%;
      height: 100%;
      position: relative;
    }
  }
}
</style>
